<template>
  <v-container class="grey lighten-3 pa-0 ">

    <v-row no-gutters justify="center" class="pt-4 pb-14">
      <v-col xl="8" md="7" lg="8" sm="12">
        <v-sheet min-height="100vh">
          <v-row no-gutters class="d-flex justify-md-start  align-center">
            <v-col md="12" sm="12">
              <v-tabs
                class="item_tabs pa-1 pl-5"
                :hide-slider="true"
                height="50"
                width="20"
                show-arrows
                color="banzhuan"
              >
                <v-tab class="">热门</v-tab
                ><v-divider class="item_divider" vertical inset></v-divider>
                <v-tab>最新</v-tab>
              </v-tabs>
            </v-col>
          </v-row>
          <v-divider class="item_divider"></v-divider>
          <Jobs
            v-for="i in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40]"
            :key="i"
           />
        </v-sheet>
      </v-col>

      <v-col xl="4" md="4" lg="4" class="pt-0 hidden-sm-and-down">
        <v-col max-height="240" max-width="200" class="pt-0 pr-0">
          <v-img
            src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d5a8b29b500844a4b64a2d12c9b916ab~tplv-k3u1fbpfcp-watermark.image"
          >
          </v-img>
        </v-col>
        <v-col max-height="240" max-width="200" class="pt-0 pr-0">
          <v-img
            src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/03001ab69cf14f15813466392bc71238~tplv-k3u1fbpfcp-watermark.image"
          >
          </v-img>
        </v-col>
        <v-col max-height="240" max-width="200" class="pt-0 pr-0">
          <Mis-Talk />
        </v-col>
        <v-col max-height="240" max-width="200" class="pt-0 pr-0">
          <v-img
            lazy-src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/40ef9839f1394117ab5e539c9f73a587~tplv-k3u1fbpfcp-watermark.image"
            src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/40ef9839f1394117ab5e539c9f73a587~tplv-k3u1fbpfcp-watermark.image"
          >
          </v-img>
        </v-col>
        <v-col max-height="240" max-width="200" class=" pr-0">
          关于营业执照 友情链接 用户协议隐私政策使用指南 京ICP备18012699号-3
          京公网安备11010802026719号
          版权所有：北京北比信息技术有限公司公司地址：北京市海淀区信息路甲28号13层B座13B-5公司座机：010-83434395
          ©2020 掘金
        </v-col>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import Jobs from "~/components/index/Jobs";
import MisTalk from "~/components/index/MisTalk";



export default {
  transition: "slide-left",
  components: { Jobs, MisTalk},
  data: () => ({
    items: [
      {
        avatar: "https://cdn.vuetifyjs.com/images/lists/1.jpg",
        title: "Brunch this weekend?",
        subtitle: ` I'll be in your neighborhood doing errands this weekend. Do you want to hang out?`
      },
      { divider: true, inset: true },
      {
        avatar: "https://cdn.vuetifyjs.com/images/lists/2.jpg",
        title: 'Summer BBQ <span class="grey--text text--lighten-1">4</span>',
        subtitle: ` Wish I could come, but I'm out of town this weekend.`
      },
      { divider: true, inset: true },
      {
        avatar: "https://cdn.vuetifyjs.com/images/lists/3.jpg",
        title: "Oui oui",
        subtitle: "Do you have Paris recommendations? Have you ever been?"
      },
      { divider: true, inset: true },
      {
        avatar: "https://cdn.vuetifyjs.com/images/lists/4.jpg",
        title: "Birthday gift",
        subtitle:
          " Have any ideas about what we should get Heidi for her birthday?"
      },
      { divider: true, inset: true },
      {
        avatar: "https://cdn.vuetifyjs.com/images/lists/5.jpg",
        title: "Recipe to try",
        subtitle:
          " We should eat this: Grate, Squash, Corn, and tomatillo Tacos."
      }
    ]
  }),

  methods: {}
};
</script>
<style lang="scss" scoped>
.v-tab {
  padding: 0 10px !important;
  min-width: 20px;
  font-size: 13px;
}

@media (min-width: 960px) {
  .container {
    max-width: 100% !important;
  }
}
.item_divider {
  border-color: #f4f4f4;
}
</style>
